<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>资源文件上传</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../../css/shangchuan.css">
    <script src="layui/layui.js"></script>
</head>

<body>
    <div class="juzhong">
        <div class="dashed">
            <span class="yi">将excel文件拖拽到此处或</span>
            <button type="button" class="layui-btn layui-btn-normal" id="test1"><span class="er">点击上传</span></button>
        </div>
    </div>
    <div class="layui-footer">
        <button type="button" class="layui-btn" id="btn1">取消上传</button>
        <table id="demo" lay-filter="test"></table>
    </div>
    <script>
        layui.use('upload', function() {
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                    ,
                url: '/upload/' //上传接口
                    ,
                done: function(res) {
                    //上传完毕回调
                },
                error: function() {
                    //请求异常回调
                }
            });
        });
    </script>
    <script>
        layui.use("layer", function() {
            var layer = layui.layer;
            var btn = document.getElementById('btn1');
            btn.onclick = function() {
                layer.open({
                    title: '提示',
                    type: '2',
                    area: ['420px', '180px'],
                    content: '<div class="neirong">如果数据存在大量重复,或者之前上传过,建议你取消<br>上传数据</div>',
                    btn: ['取消', '确定'],
                    shade: [0.5, '#000']
                })
            };
        });
    </script>

    <script>
        layui.use('table', function() {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#demo',
                url: '/demo/table/user/', //数据接口
                page: true, //开启分页
                cols: [
                    [ //表头
                        {
                            field: 'number',
                            title: '序号',
                            width: '4%',
                            align: 'center'
                        }, {
                            field: 'zichanmingcheng',
                            title: '非经营性资产名字',
                            width: '10%',
                            align: 'center'
                        }, {
                            field: 'suoshucun',
                            title: '所属村',
                            width: '5%',
                            align: 'center'
                        }, {
                            field: 'suoshuzu',
                            title: '所属组',
                            width: '5%',
                            align: 'center'
                        }, {
                            field: 'zichanleixing',
                            title: '资产类型',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'danwei',
                            title: '计量单位',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'shuliang',
                            title: '数量',
                            width: '4%',
                            align: 'center'
                        }, {
                            field: 'danjia',
                            title: '单价',
                            width: '4%',
                            align: 'center'
                        }, {
                            field: 'qingkuang',
                            title: '变动情况',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'jiazhi',
                            title: '现今价值',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'pinpai',
                            title: '品牌',
                            width: '4%',
                            align: 'center'
                        }, {
                            field: 'xinghao',
                            title: '规格型号',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'shijian',
                            title: '构建时间',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'laiyuan',
                            title: '产品来源',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'nianxian',
                            title: '预计年限',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'bumen',
                            title: '使用部门',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'zhuangtai',
                            title: '产品状态',
                            width: '6%',
                            align: 'center'
                        }, {
                            field: 'beizhu',
                            title: '备注',
                            width: '4%',
                            align: 'center'
                        }
                    ]
                ]
            });
        });
    </script>
</body>

</html>